<template>
  <div
    class="resource-view-1-box w-full h-full overflow-hidden box-border flex justify-start items-center flex-col"
  >
    <div class="content w-full h-[calc(100%_-_64px)] box-border p-[20px_24px] overflow-hidden overflow-y-auto">
      <div 
        class="w-full h-[56px] p-[16px_0] overflow-hidden box-border flex justify-start items-start"
        style="font-family: Microsoft YaHei; font-size: 16px; font-weight: bold; color: #394D73;"
      >资源信息</div>
      <div class="info w-full h-auto p-[20px] box-border bg-[#F7F9FC] rounded-[8px]">
        <a-row>
          <a-col :span="8">
            <a-form-item label="资源名称">{{ props.data.name }}</a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="资源编号">{{ props.data.code }}</a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="资源密级">{{ props.data.security_level }}</a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item label="数据应用场景">{{ props.data.scene.join(',') }}</a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="数据更新频率">{{ props.data.update_frequency }}</a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="数据字段数">{{ props.data.data_fields_count }}</a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item label="数据游览量">{{ props.data.data_browsing_number }}</a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="数据下载量">{{ props.data.data_download_number }}</a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="数据调用量">{{ props.data.data_call_number }}</a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item label="资源更新时间">{{ props.data.update_time }}</a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="资源所属组织">{{ showOrg(props.data.owner_org_code) }}</a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="数据资源来源">{{ props.data.from }}</a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item label="生产源">{{ props.data.production_resource }}</a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="是否根资源">
              {{ props.data.is_root ? '根资源' : '非根资源' }}
              <!-- <a-switch v-model="props.data.is_root"></a-switch> -->
            </a-form-item>
          </a-col>
          <a-col :span="8"> </a-col>
        </a-row>
      </div>
      <div 
        class="w-full h-[56px] p-[16px_0] overflow-hidden box-border flex justify-start items-start"
        style="font-family: Microsoft YaHei; font-size: 16px; font-weight: bold; color: #394D73;"
      >数据关系视图</div>
      <div class="relation-view-box w-full h-[300px] m-[0_0_10px_0] overflow-hidden box-border rounded-[8px]"  ref="RefBox" style="border: 1px solid #D3DBEB;">
        <EchatrBox 
          :height="`${RefBox?.clientHeight || 0}px`" 
          :width="`${RefBox?.clientWidth || 0}px`" 
          :data="dataRelations"
          v-if="RefBox && dataRelations.length > 0"
        />
      </div>
    </div>
    
    <div
      class="footer w-full h-[64px] overflow-hidden box-border flex justify-end items-center pl-[24px] pr-[24px]"
    >
        <a-button @click="toEdit()" class="mr-2">编辑当前版本</a-button>
        <a-button type="primary" @click="toClose">关闭</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as Api from '@/api/assetManagement/assetManagement';
import * as T from '@/api/assetManagement/assetManagement_type';
import EchatrBox from '@/components/echarts_allocation/EachartsView.vue';
import { Message } from '@arco-design/web-vue';
import type { PropType } from 'vue';
import { nextTick, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';

const props = defineProps({
  data: {
    type: Object as PropType<T.TResourceItem>,
    required: true
  }
});

const router = useRouter();
const RefBox = ref()
const dataRelations = ref<any>([])

function getRelation() {

  Api.GetRelation(props.data.id).then((rs) => {
    const { code, data } = rs;
    if (code === 200 && data) {
      dataRelations.value = data.map((item: any) => {
        return {
          ...item,
          name: `${item.name}(V ${item.version}.0)`
        }
      });
      return
    }
    Message.error(`获取资源关系失败[${rs.errMsg}]`);
  });
}

function showOrg(org: any[]) {
  if(!org) return ''
  const name: string[] = [];

  org.forEach((item) => {
    name.push(item.name);
  });
  return name.join(',');
}

function toEdit() {
  const { id } = props.data;
  if (!id) return;
  router.push({
    name: 'resourceedit',
    params: {
      id: id
    }
  });
}

function toClose() {
  router.push({
    name: 'resource'
  });
}

watch(() => props.data, (newVal) => {
  if (newVal.id) {
    getRelation();
  }
}, { immediate: true });

onMounted(() => {
  nextTick(() => {
    // ..
  })
});
</script>

<style lang="less" scoped>
.resource-view-1-box {
  .title {
    span:first-child {
      font-family: Microsoft YaHei;
      font-size: 20px;
      font-weight: bold;
      color: #394d73;
    }
  }
  .footer {
    box-shadow: 0px 0px 6px 0px rgba(57, 77, 115, 0.1);
  }
}
</style>
